import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { getArtistDescAction } from "../../../store/actionTypes";

export default memo(function ArtistDescInfo(props) {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getArtistDescAction(props.id));
  }, [dispatch, props.id]);

  const { artistDesc } = useSelector(
    (state) => ({
      artistDesc: state.getIn(["artistPage", "artistDesc"]),
    }),
    shallowEqual
  );

  const artistDescInfo = artistDesc.code !== undefined && artistDesc;

  return (
    <div className="artist-desc">
      <p className="artistTi">
        <i>&nbsp;</i>
        {props.name}简介
      </p>
      <p className="desc-p">{artistDescInfo.briefDesc}</p>
      {artistDescInfo
        ? artistDescInfo.introduction.map((item, index) => {
            return (
              <React.Fragment>
                <p className="artistTi">{item.ti}</p>
                <p className="desc-p">{item.txt}</p>
              </React.Fragment>
            );
          })
        : ""}
    </div>
  );
});
